<template>
	<view class="email-login">
		<!-- Logo部分 -->
		<view class="logo-section">
			<image src="@/static/public/logo.png" mode="aspectFit" class="logo"></image>
		</view>

		<!-- 登录表单 -->
		<view class="login-form">
			<!-- 手机号输入框 -->
			<view class="input-item">
				<view class="flex" style="align-items: center;">
					<text class="label" style="width: 120rpx">手机号</text>
					<text class="phone">+86</text>
				</view>
				<input type="text" v-model="mobile" placeholder="填写手机号" placeholder-class="placeholder" />
			</view>

			<!-- 密码输入框 -->
			<view class="input-item">
				<text class="label">密码</text>
				<input :password="!showPassword" v-model="password" placeholder="填写密码" placeholder-class="placeholder" />
				<image :src="showPassword ? '/static/public/eye-open.png' : '/static/public/eye-close.png'" mode="aspectFit" class="eye-icon" @click="togglePasswordVisibility" />
			</view>

			<!-- 忘记密码链接 -->
			<view class="forget-password">
				<text @click="goToForgetPassword">忘记密码</text>
			</view>
		</view>

		<!-- 确认按钮 -->
		<view class="confirm-btn" @click="handleLogin">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				password: '',
				showPassword: false
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword
			},
			goToForgetPassword() {
				// 跳转到忘记密码页面
				uni.navigateTo({
					url: '/pages/public/forgetPhonePassword'
				})
			},
			handleLogin() {
				// 处理登录逻辑
				if (!this.mobile || !this.password) {
					uni.$u.toast('请填写完整信息')
					return
				}
				this.$http_api.mobileLogin({ mobile: this.mobile, password: this.password }).then((res) => {
					uni.showToast({ title: '登录成功', icon: 'success' });
					this.$store.dispatch('userLoginAction', res)
					uni.setStorageSync('token', res.accessToken);
					uni.$emit('loginSuccessEvent');
					setTimeout(() => uni.switchTab({ url: '/pages/index/index' }), 1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.email-login {
		padding: 40rpx;
		display: flex;
		min-height: calc(100vh - 160rpx);
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}

	.logo-section {
		margin: 120rpx 0;

		.logo {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.login-form {
		width: 85%;

		.input-item {
			position: relative;
			border-bottom: 2rpx solid #EEEEEE;
			margin-bottom: 40rpx;
			padding: 20rpx 0;
			display: flex;
			font-weight: 600;
			align-items: center;

			.label {
				font-size: 34rpx;
				color: #353535;
				display: block;
				margin-top: 2rpx;
				min-width: 100rpx;
			}
			
			.phone {
				font-size: 30rpx;
				padding-left: 10rpx;
			}

			input {
				font-size: 30rpx;
				padding: 10rpx 0;
				padding-left: 50rpx;
				font-size: 28rpx;
				color: #353535;
			}

			.placeholder {
				color: #939AA8;
				font-weight: 400;
				font-size: 29rpx;

			}

			.eye-icon {
				position: absolute;
				right: 0;
				bottom: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.forget-password {
		text-align: right;
		margin: 30rpx 0;

		text {
			color: #999;
			font-size: 28rpx;
		}
	}

	.confirm-btn {
		position: fixed;
		bottom: 100rpx;
		left: 40rpx;
		right: 40rpx;
		height: 95rpx;
		line-height: 95rpx;
		background: #2993FF;
		border-radius: 69rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		max-width: 554rpx;
		margin: 0 auto;
	}
</style>